<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    table {
      width: 500px;
    }

    td {
      text-align: center;
    }

    table .active {
      background: red;
    }
  </style>
</head>

<body>
  <div>
    姓名：<input type="text" id="username">
    年龄：<input type="text" id="age">
    <br>
    男：<input type="radio" checked value="男" name="sex">女<input type="radio" value="女" name="sex">
    <br>
    <button id="add">添加</button> <button id="orderBtn">按年龄升序</button>
    <br>
    <input type="text" id="searchTxt"><button id="searchBtn">搜索</button>
    <div>
      <table border="1">
        <thead>
          <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody id="tbody">
          <!-- <tr>
            <td>1</td>
            <td>订单</td>
            <td>12</td>
            <td>男</td>
            <td> <button class="del">删除</button> </td>
          </tr> -->
        </tbody>
      </table>
    </div>
  </div>
  <script>
    // 准备localStorage数据
    var userlist = [];
    if (localStorage.userlist) {
      userlist = JSON.parse(localStorage.userlist)
    } else {
      localStorage.userlist = JSON.stringify([])
    }
    // 添加---------------------------------
    var add = document.getElementById("add");
    var usernameEle = document.getElementById("username");
    var ageEle = document.getElementById("age")
    var sex = document.getElementsByName("sex");
    add.onclick = function () {
      var sexVal = ""
      for (var i = 0; i < sex.length; i++) {
        if (sex[i].checked) {
          sexVal = sex[i].value;
        }
      }
      if (usernameEle.value && ageEle.value) {
        // 准备好要添加的数据
        var obj = {
          username: usernameEle.value,
          age: ageEle.value,
          sex: sexVal
        }
        userlist.push(obj)
        localStorage.userlist = JSON.stringify(userlist)
        loadList(userlist)
        // 清空
        usernameEle.value = ""
        ageEle.value = ""
      } else {
        alert("完善信息")
      }
    }
    // 渲染操作--------------------------------------------
    var tbody = document.getElementById("tbody")
    function loadList(userlist) {
      var str = "";
      for (var i = 0; i < userlist.length; i++) {
        str += `<tr class="${userlist[i].isred ? 'active' : ''}">
            <td>${i + 1}</td>
            <td>${userlist[i].username}</td>
            <td>${userlist[i].age}</td>
            <td>${userlist[i].sex}</td>
            <td> <button class="del" onclick="del(${i})">删除</button> </td>
          </tr>`
      }
      tbody.innerHTML = str;
    }
    loadList(userlist) //初始渲染
    //删除-----------------------------------
    function del(index) {
      userlist.splice(index, 1);
      localStorage.userlist = JSON.stringify(userlist);
      loadList(userlist)
    }
    //搜索-----------------------------------
    var searchBtn = document.getElementById("searchBtn");//搜索按钮
    var searchTxt = document.getElementById("searchTxt");//搜索输入框
    searchBtn.onclick = function () {

      var searchVal = searchTxt.value; //搜索字段
      for (var i = 0; i < userlist.length; i++) {
        if (userlist[i].username.indexOf(searchVal) != -1) {
          userlist[i].isred = true;
        }
      }
      console.log(userlist)
      loadList(userlist)
    }
    //排序------------------------------------
    var orderBtn = document.getElementById("orderBtn");
    var num = 0;
    orderBtn.onclick = function () {
      if (num % 3 == 0) {
        userlist.sort(function (a, b) {
          return a.age - b.age //数组中的某个字段排序
        })
      } else if (num % 3 == 1) {
        userlist.sort(function (a, b) {
          return b.age - a.age //数组中的某个字段排序
        })
      } else if (num % 3 == 2) {
        userlist = JSON.parse(localStorage.userlist)
      }
      loadList(userlist)
      num++
    }
  </script>
</body>

</html>